
<head>
    <style>
        .background{
            background-color:#1E90FF
        }
        .config{
            float: left;width:200px;text-align: center;white-space: nowrap;height:50px;
            text-overflow: ellipsis;-o-text-overflow:ellipsis;  overflow: hidden;
        }
    </style>
</head>
<div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
    <h4 class="modal-title">模组温度配置</h4>
</div>
<form id="defaultForm" method="post" class="form-horizontal" action="/project/objectManage/config_save">
    <div class="modal-body">
        <div class="form-group">
                <div class="form-group col-lg-6" style="margin-right: 10px; height: 400px">
                <fieldset  id="package_monitor" >
                    <legend>单体与温度测点</legend>
                    <fieldset class="col-lg-5" id="package_monitor1" style="margin:auto 20px; height: 350px;float: left;">
                        <legend>单体列表</legend>
                        <ul class="list-group" style="overflow-y:scroll;height: 300px;">
                            <li class="list-group-item background" th:each="m:${list}">
                                <input type="checkbox" name="battery" th:value="${m.name}"/>
                                <label th:text="${m.name}"></label>
                            </li>
                        </ul>

                    </fieldset>

                    <fieldset class="col-lg-5" id="package_monitor2" style="
                    margin:auto 20px ; height: 350px;float: left;">
                        <legend>温度测点表</legend>
                        <ul class="list-group " >
                            <li class="list-group-item background" th:each="n:${list1}">
                            <input type="checkbox" name="tem" th:value="${n.name}"/>
                            <label th:text="${n.name}"></label></li>
                        </ul>
                    </fieldset>

                </fieldset>
                </div>


                <div class="form-group col-lg-1" style=" display: block;margin: 150px auto">

                    <div >
                    <button type="button" class="btn btn-default btn-lg" id="button1" data-toggle="tooltip"
                            title="添加单体和温度的配置关系">
                        <span class="glyphicon glyphicon-chevron-right"></span>
                    </button>
                    </div>

                    <div style="margin-top:50px">
                    <button type="button" class="btn btn-default btn-lg" id="button2" data-toggle="tooltip"
                             title="删除单体和温度的配置关系">
                        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                    </button>
                    </div>

                </div>

                <div class="form-group col-lg-5" style="margin-right: 10px; float:right;">
                <fieldset  class="col-lg-12" id="package_monitor3" style="height: 400px;">
                    <legend>配置表</legend>
                    <ul class="list-group" style="margin: auto 20px;" >
                        <li class="list-group-item config" >对应单体</li>
                        <li class="list-group-item config" >对应温度测点</li>

                    </ul>

                </fieldset>
                </div>

        </div>
    </div>
    <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
        <button type="submit" class="btn btn-primary">保存</button>
    </div>
</form>

<script th:inline="javascript">

    $(function () { $("[data-toggle='tooltip']").tooltip(); });

    var battery_arr=[];
    var tem_arr = [];//定义一个数组用来接收多选框的值
    var battery = [[${list}]];
    var tem = [[${list1}]];
    //监听checkbox的value值 改变则执行下列操作
    $("input[name='battery']").change(function () {
        if ($(this).prop("checked")) {
            battery_arr.push($(this).val());//将选中的选项添加到数组中
        } else {
            var index = getIndex(battery_arr, $(this).val())//找到没有选中的选项在数组中的索引
            battery_arr.splice(index, 1);//在数组中删除该选项
        }
    })

    $("input[name='tem']").change(function () {
        if ($(this).prop("checked")) {
            tem_arr.push($(this).val());//将选中的选项添加到数组中
        } else {
            var index = getIndex(tem_arr, $(this).val())//找到没有选中的选项在数组中的索引
            tem_arr.splice(index, 1);//在数组中删除该选项
        }
    })
    //这个函数用于获取指定值在数组中的索引
    function getIndex(arr, value) {
        for (var i = 0; i < arr.length; i++) {
            if (arr[i] == value) {
                return i
            }
        }
    }
    //点击按钮是弹出数组

    $('#button1').click(function () {
        var temStr="";
        var batStr="";
        if(tem_arr.length==0){
            alert("请选择温度");
        }
        if(battery_arr.length==0){
            alert("请选择电池单体");
        }
         if(tem_arr.length>0 && battery_arr.length>0){
            for (i = 0; i < tem_arr.length; i++) {
                temStr += tem_arr[i] + "|";
                $("input[value='" + tem_arr[i] + "']").parent().remove();
            }
            if (temStr.charAt("|")) {
                temStr = temStr.substring(0, temStr.lastIndexOf("|"));
            }

            for (i = 0; i < battery_arr.length; i++) {
                batStr += battery_arr[i] + "|";
                $("input[value='" + battery_arr[i] + "']").parent().remove();
            }
            if (batStr.charAt("|")) {
                batStr = batStr.substring(0, batStr.lastIndexOf("|"));
            }
            var str = batStr + "," + temStr;

            $("#package_monitor3 ul").append(' <li class="list-group-item config"><input type="checkbox" name="conf" value="' + str + '">' + batStr + '</li>');
            $("#package_monitor3 ul").append(' <li class="list-group-item config" >' + temStr + '</li>');

            tem_arr.length = 0;
            battery_arr.length = 0;
        }
    })

    $('#button2').click(function () {
        var obj=$("input[name='conf']");

        if ($("input[name='conf']:checked")) {
            var unChoose = new Array();
                $("input[name='conf']:not(:checked)").each(function () {
                    unChoose.push($(this).val());
                });
            $("input[name='conf']:checked").each(function () {

                $(this).parent().next().remove();
                $(this).parent().remove();
            });

            $("#package_monitor1 ul").find("li").remove();
            $("#package_monitor2 ul").find("li").remove();

            if(unChoose.length>0){
            for (i = 0; i < unChoose.length; i++) {
                var value = [];
                    value = unChoose[i].split(",");
                    for (i = 0; i < battery.length; i++) {
                        if (value[0].indexOf(battery[i].name) < 0) {
                            $("#package_monitor1 ul").append('<li class="list-group-item background">' +
                                '<input type="checkbox" name="battery" value="' + battery[i].name + '"/>' + battery[i].name + '</li>')
                        }
                    }
                    for (j = 0; j < tem.length; j++) {
                        if (value[1].indexOf(tem[j].name) < 0) {
                            $("#package_monitor2 ul").append('<li class="list-group-item background">' +
                                '<input type="checkbox" name="battery" value="' + tem[j].name + '"/>' + tem[j].name + '</li>')
                        }
                    }
                }
            }else{

                    for (i = 0; i < battery.length; i++) {
                        $("#package_monitor1 ul").append('<li class="list-group-item background">' +
                            '<input type="checkbox" name="battery" value="' + battery[i].name + '"/>'+battery[i].name+'</li>')
                    }
                    for (j = 0; j < tem.length; j++) {
                        $("#package_monitor2 ul").append('<li class="list-group-item background">' +
                            '<input type="checkbox" name="battery" value="' + tem[j].name + '"/>'+tem[j].name+'</li>')
                    }
                }
            }
        else
    {
        alert("请选择配置项")
    }
    });












</script>